<template>
  <div class='article-container'>
    <!-- 表单区域 -->
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>内容管理</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <el-form label-width="80px">

        <el-form-item label="状态">
          <el-radio-group v-model="form.status">
            <el-radio :label="null">全部</el-radio>
            <el-radio :label="0">草稿</el-radio>
            <el-radio :label="1">待审核</el-radio>
            <el-radio :label="2">审核通过</el-radio>
            <el-radio :label="3">审核失败</el-radio>
            <el-radio :label="4">已删除</el-radio>
          </el-radio-group>
        </el-form-item>
          //查询条件
         <my-channel v-model="formId.formId"></my-channel>
        <el-form-item label="日期">
          <el-date-picker
            v-model="form.dateRange"
            type="daterange"
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="hQuery"  v-loading="loading">查询</el-button>
        </el-form-item>
      </el-form>
      
    </el-card>
    <!-- 表格区域 -->
    <!-- 标题 -->
     <el-card class="box-card"  style="margin-top:20px">
      <div slot="header" class="clearfix">
      <span>{{this.total_count}}</span>
      </div>
      <!-- 表格 -->
     <el-table
       v-loading="loading"
        :data="tableData"
        style="width: 100%">
        <el-table-column
          label="封面"
          width="180">
          <template slot-scope="scope">
            <el-image :src="scope.row.cover.images[0]" />
           <el-image
                style="width: 150px; height: 100px"
                :src="scope.row.cover.images[0]">
                  <div slot="error" class="image-slot">
                    <i class="el-icon-picture-outline"></i>
                  </div>
              </el-image>
          </template>
        </el-table-column>

        <el-table-column
          prop="title"
          label="标题"
          width="180">
        </el-table-column>

        <el-table-column
          label="状态">

          <template slot-scope="scope">
            <el-tag :type='scope.row.status | fStatusText(1)'>{{scope.row.status | fStatusText(0)}}</el-tag>
            <!-- <el-tag v-if="scope.row.status===0" type="info">草稿</el-tag>
            <el-tag v-else-if="scope.row.status===1" type="success">待审核</el-tag>
            <el-tag v-else-if="scope.row.status===2">审核通过</el-tag>
            <el-tag v-else-if="scope.row.status===3" type="warning">审核失败</el-tag>
            <el-tag v-else-if="scope.row.status===4" type="danger">已删除</el-tag> -->
          </template>
        </el-table-column>

        <el-table-column
          prop="pubdate"
          label="发布时间">
        </el-table-column>
             //删除
        <el-table-column
          label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              :circle="true"
              icon="el-icon-edit"
              @click="handleEdit(scope.row)"></el-button>
            <el-button
              size="mini"
              circle
              type="danger"
              icon="el-icon-delete"
              @click="hDelete(scope.row)"></el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination
        background
        layout="prev, pager, next"
        :page-size="10"
        @current-change="hCurrentChange"
        :total="total_count">
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
// 引入频道组件
import Components from "../../components/components.vue";
export default {
  name: "tableData",
  components: {
    Components: Components,
  },
  data() {
    return {
      form: {
        formId: null,
        status: null, // 状态
        dateRange: "",
      },
      loading:true,//查询加载
      page: 1, // 页码
      total_count: 0, // 总数量
      tableData: [], // 表格数据
    };
  },
  created() {
    // 发请求
    this.loadArticles();
  },
  // 文章状态
  filters: {
    fStatusText(status, val) {
      const texts = {
        0: ["草稿", "info"],
        1: ["待审核", "normal"],
        2: ["审核通过", "success"],
        3: ["审核失败", "warning"],
        4: ["已删除", "danger"],
      };
      return val === 0 ? texts[status][0] : texts[status][1];
    },
  },
  methods: {
    //重新加载
    hQuery() {
      this.loadArticles();
    },  
    // 收集查询条件
    buildParams() {
      const { dateRange, status } = this.form;
      const formId = this.form.formId === "" ? null : this.form.formId;
      const params = {
        formId: formId, // 频道组件id
        page: this.page, // 页码
        status: status, // 状态
      };
      if (dateRange) {
        params.begin_pubdate = dateRange[0];
        params.end_pubdate = dateRange[1];
      }
      // 返回对象
      return params;
    },
    //请求数据查询 
    async loadArticles() {
       this.loading=true
      try {
        const params = this.buildParams();
        const res = await this.$axios({
          url: "/mp/v1_0/articles",
          method: "get",
          params: params,
        });
        console.log(res);
        // 数据项
        this.tableData = res.data.data.results;
        this.total_count = res.data.data.total_count;
      } catch (err) {
        console.log(err);
        // 发生错误，清空数据
        this.tableData = [];
      }
       this.loading=false;
    },
    //更新页码
    hCurrentChange(curPage) {
      // 页码
      this.page = curPage;
      // 重铺页面
      this.loadArticles();
    },
    handleEdit(row) {
        const id = row.id.toString()
          this.$router.push({
        name: 'edit',
        params: {
          id: id,
          a: 1,
          b: 2
        }
      })
    }, 
    //判断删除
    hDelete (row) {
      this.$confirm('确定要删除吗').then(() => {
        // 取整
        const id = row.id.toString()
        this.Delete(id)
      }).catch(() => {
      })
    },
    //确定则发送删除请求
   async Delete (id) {
      try {
        const res = await this.$axios({
          method: 'DELETE',
          url: '/mp/v1_0/articles/' + id
        })
        console.log(res)
        // 删除成功
        this.$message.success('删除成功')
        this.loadArticles()
      } catch (err) {
        console.log(err)
        this.$message.error('删除失败')
      }
    }, 
  },
};
</script>
